<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet"
	href="resources/common/common.css">
<style>
@font-face {
	font-family: cat;
	src: url('whitecat.eot'); /* IE9 호환성 보기 */
	src: url('whitecat.eot?iefix') format('eot'), /* IE6-IE8 */  
		 url('whitecat.woff') format('woff'), /* Modern Browsers */  
		 url('../resources/common/whitecat.ttf') format('truetype');
	/* Safari, android, iOS */;
}

#content1 {
	float: none;
	width: 100%;
}

.notice {
	position: relative;
	overflow: hidden;
	background-color: #f8f8f8;
	padding: 8px 93px 5px 21px;
	border-bottom: 1px solid #e5e5e5;
	color: #333;
	font-weight: bold;
	font-size: x-large; line-height : 30px;
	border-top: 1px solid #484848;
	line-height: 30px;
}

#ss {
	margin-left: 10px;
}

.txt_date {
	position: absolute;
	top: 50%;
	right: 21px;
	display: block;
	margin-top: -10px;
}

.readcount {
	position: absolute;
	top: 75%;
	right: 100px;
	display: block;
	margin-top: -10px;
}

.writer {
	position: relative;
	overflow: hidden;
	background-color: #FFFFFF;
	padding: 8px 93px 5px 21px;
	border-bottom: 1px solid #e5e5e5;
	color: #333;
	font-weight: lighter;
	line-height: 15px;
}

textarea{
position: relative;
left: 50px;
}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script>
	//답글링크를 눌렀을때 에디터 창을 뿌려주는 이벤트, 삭제링크를 눌렀을때 해당 댓글을 삭제하는 이벤트

	function showReplyForm(b_seq, divNo, userId) {
		/* 			alert(b_seq+':'+divNo);  */
		var commentEditor = '<form method=post action="ReviewReplyInsert">'
				+ '<table width=98% cellpadding=3 cellspacing=0><tr align="center"><td><input type="hidden" id="writer" name="writer" value="${sessionScope.loginUser.user_id }" size=10 style="font-family: verdana; font-size: 97%; color: #000000;">'
				+ '<input type="hidden" id="comment_no" name="comment_no" value="'+b_seq+'">'
				+ '<input type="hidden" id="posts_no" name="posts_no" value="${BOARD.posts_no}">'
				+ '<input type="hidden" id="user_id" name="user_id" value="'+userId+'">&nbsp;&nbsp;'
				+ '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'
				+ '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'
				+ '</td></tr><tr>'
				+ '<td valign=bottom><textarea name="content" cols=50 rows=5 style="overflow: hidden; width: 95%; height: 150px; line-height: 150%;" style="font-family:verdana;font-size:97%; color:#000000; background-color:#f0f0f0;"></textarea></td>'
				+ '<td align="center"><input type=submit id="commentChildSubmit" name="commentChildSubmit" value="등 록" style="width:50px; height:50px; font-family: verdana; font-size: 97%;"></td>'
				+ '</tr></table></form>';

			
			$("#div_reply1Form"+divNo).append(commentEditor);
			var comm = '<a class=reply${cnt.index} href=javascript:CommentReset('+b_seq+','+divNo+',"'+userId+'")>취소</a>';	
			$(".reply"+divNo).remove();
			$("#coco"+divNo).html(comm);
		}
		
 function CommentReset(b_seq, divNo, userId){
	 var anser ='<a href=javascript:showReplyForm('+b_seq+','+divNo+',"'+userId+'")>답변</a>';
	$(".reply"+divNo).remove();
	$("#div_reply1Form"+divNo).empty();
	$("#coco"+divNo).html(anser);
}  



 function showCommentUpdateForm(b_seq, divNo,  userId) {
	 /* 			alert(b_seq+':'+divNo);  */
	 			var commentEditor = '<form method=post action="ReviewCommentUpdate">'
	 				+ '<table width=98% cellpadding=3 cellspacing=0><tr align="center">'
	 				+ '<input type="hidden" id="posts_no" name="posts_no" value="${BOARD.posts_no}">'
	 				+'<input type="hidden" id="comment_no" name="comment_no" value="'+b_seq+'">'
	 				+ '</td></tr><tr>'
	 				+ '<td valign=bottom><textarea name="comment_comment" cols=50 rows=5 style="overflow: hidden; width: 100%; height: 150px; line-height: 150%;" style="font-family:verdana;font-size:97%; color:#000000; background-color:#f0f0f0;"></textarea></td>'
	 				+ '<td align="center"><input type=submit id="commentChildSubmit" name="commentChildSubmit" value="수 정" style="width:50px; height:50px; font-family: verdana; font-size: 97%;"><a href="javascript:resetComment('+divNo+')"><input type="button" value="취 소" style="width:50px; height:50px; font-family: verdana; font-size: 97%;"></a></td>'
	 				+ '</tr align="center"></table></form>';
	 			$("#comt"+divNo).hide();
	 			$("#comtcom"+divNo).hide();
	 			$("#div_reply1Form"+divNo).append(commentEditor);
	 		}
 
	function resetComment(divNo){
		$("#div_reply1Form"+divNo).empty();
		$("#comt"+divNo).show();
			$("#comtcom"+divNo).show();
	}  
 
 
		function showCommentReplyForm(b_seq, divNo, userId) {
			var commentEditor = '<form method=post action="ReviewReplyInsert">'

				+ '<table width=98% cellpadding=3 cellspacing=0><tr align="center"><td> <input type="hidden" id="writer" name="writer" value="${sessionScope.loginUser.user_id }" size=10 style="font-family: verdana; font-size: 97%; color: #000000;">'
				+ '<input type="hidden" id="comment_no" name="comment_no" value="'+b_seq+'">'
				+ '<input type="hidden" id="posts_no" name="posts_no" value="${BOARD.posts_no}">'
				+ '<input type="hidden" id="user_id" name="user_id" value="'+userId+'">&nbsp;&nbsp; '
				+ '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'
				+ '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'
				+ '</td></tr><tr>'
				+ '<td valign=bottom><textarea name="comment_reply" cols=50 rows=5 style="overflow: hidden; width: 95%; height: 150px; line-height: 150%;" style="font-family:verdana;font-size:97%; color:#000000; background-color:#f0f0f0;"></textarea></td>'
				+ '<td align="center"><input type=submit id="commentChildSubmit" name="commentChildSubmit" value="등 록" style="width:50px; height:50px; font-family: verdana; font-size: 97%;"></td>'
				+ '</tr></table></form>';
				
			$("#div_commentreply2Form"+divNo).append(commentEditor);
			var comm = '<a href=javascript:ReplyReset('+b_seq+','+divNo+','+userId+') class=comreply${cnt.index}>취소</a>';	
			$(".comreply"+divNo).remove();
			$("#coc"+divNo).html(comm);
		}

		
		
function ReplyReset(b_seq, divNo, userId){
	var anser ='<a href="javascript:showCommentReplyForm('+b_seq+','+divNo+','+userId+')">답변</a>';
 	$(".comreply"+divNo).remove();
	$("#div_commentreply2Form"+divNo).empty();
	$("#coc"+divNo).html(anser); 
}  

function showReplyUpdateForm(b_seq, divNo,  userId, No) {
	 /* 			alert(b_seq+':'+divNo);  */
	 			var commentEditor = '<form method=post action="ReviewReplyUpdate">'
				+ '<table width=98% cellpadding=3 cellspacing=0><tr align="center"><td>'
				+ '<input type="hidden" id="posts_no" name="posts_no" value="${BOARD.posts_no}">'
				+ '<input type="hidden" id="no" name="no" value="'+No+'">'
				+ '</td></tr><tr>'
				+ '<td valign=bottom><textarea name="content" cols=50 rows=5 style="overflow: hidden; width: 107%; height: 150px; line-height: 150%;" style="font-family:verdana;font-size:97%; color:#000000; background-color:#f0f0f0;"></textarea></td>'
				+ '<td align="right"><input type=submit id="commentChildSubmit" name="commentChildSubmit" value="수 정" style="width:50px; height:50px; font-family: verdana; font-size: 97%;"><a href="javascript:resetReply('+divNo+')"><input type="button" value="취 소" style="width:50px; height:50px; font-family: verdana; font-size: 97%;"></td>'
				+ '</tr></table></form>';
	 			$("#rep"+divNo).hide();
	 			$("#repcon"+divNo).hide();
	 			$("#div_commentreply2Form"+divNo).append(commentEditor);
	 		}
	 		
function resetReply(divNo){
	$("#div_commentreply2Form"+divNo).empty();
	$("#rep"+divNo).show();
		$("#repcon"+divNo).show();
}  

function login(){
	alert("로그인 하세요");
	
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>자유게시판 상세 화면</title>
</head>
<body>
	<jsp:include page="../main_header.jsp"></jsp:include>
	<div id="container">
		<div id="content1">
			<div class="location">
				<a href="/">Home ></a><a href="review/ReviewList">Review</a>
			</div>
			<div class="title">
				<h2 class="kr">Review</h2>
			</div>
			<div class="set_divide">
				<p class="txt_bul_info mg0">MC SHOP을 방문해주셔서 감사합니다.</p>
			</div>
			<div class="board">
				<dl class="view">
					<dt class="notice">
						<span id="ss">${BOARD.posts_title  }</span> 
					</dt>
					<dt class="writer">
						글쓴이 : ${BOARD.posts_Author } <span class="readcount">조회수:${BOARD.rec_count  }</span>
						<span class="txt_date">${BOARD.posts_create_date  }</span>
					</dt>
					<dd>
						<p>
						<br> 
						<c:choose>
							<c:when test="${BOARD.image != ''}">
							<img width="215" height="255" src="/resources/image/${BOARD.image}"> 
							</c:when>
							<c:when test="${BOARD.image == ''}">
							<img width="215" height="255" src="resources/image/noimage.gif"> 
							</c:when>
						</c:choose>
						
						
						<br> <br>${BOARD.posts_contents  }<br>
							<br> <br> <br> <br> <br> <br>
							
	<table style="width: 100%">
	<tr align="right"><td>
	<c:choose>
		<c:when test="${not empty loginUser }">
			<c:if test="${sessionScope.loginUser.user_id == BOARD.posts_Author }">
				<a href="ReviewUpdateForm?posts_no=${BOARD.posts_no}"><input type="button" style="width: 60px; height: 27px"value="수정"></a>
				<a href="ReviewDelete?posts_no=${BOARD.posts_no}"><input type="button" style="width: 60px; height: 27px"value="삭제"></a>
			</c:if>
		</c:when>
	</c:choose>
	<a href="/ReviewList"><input type="button" value="목록" style="width: 60px; height: 27px"></a>
	</td>
	</tr>
</table>
						<table width=60% border="1" align=center margin=0 padding=0
							cellpadding=0 cellspacing=1
							style="border-width: 1; border-color: rgb(204, 204, 204); border-style: dotted; width: 100%;  ">
		<c:forEach items="${COMMENT}" var="COMMENT" varStatus="cnt">

			<tr id="comt${cnt.index }" bgcolor="#f0f0f0">
				<td width="13%" align=center style='word-break: break-all;'
										rowspan="2">
				<b>${COMMENT.comment_name}</b>
				<input type="hidden" name="comment_no" value="${COMMENT.comment_no}">
									</td>
			
				<td align="left" width="75%" style="border-right: 0 none;">
					&nbsp;${COMMENT.comment_registdate}</td>
					
				<td style="border-left: 0 none;">
				<c:choose>
					<c:when test="${not empty loginUser }">
						<c:if test="${sessionScope.loginUser.user_id == COMMENT.comment_name }">
							<a href="javascript:showCommentUpdateForm(${COMMENT.comment_no}, ${cnt.index}, '${COMMENT.comment_name}')">수정</a>|<a href="deleteComment?comment_no=${COMMENT.comment_no }&comment_name=${sessionScope.loginUser.user_id }">삭제</a>
						</c:if>
						<c:if test="${sessionScope.loginUser.user_id != COMMENT.comment_name }">
							<p id="coco${cnt.index }"><a class="reply${cnt.index}" href="javascript:showReplyForm(${COMMENT.comment_no}, ${cnt.index}, '${COMMENT.comment_name}')">답변</a></p>
						</c:if>
					</c:when>
					<c:when test="${empty loginUser }">
						<a  href="javascript:login()">답변</a>
					</c:when>
				</c:choose>
			</td>
			</tr>

			<tr id="comtcom${cnt.index }" align="left" bgcolor="#f0f0f0">
				<td colspan="2" style='word-break: break-all;'>&nbsp;${COMMENT.comment_comment}</td>
			</tr>
			<tr align="left" bgcolor="#f0f0f0">
				<td colspan="3" style='word-break: break-all;'>
					<div id="div_reply1Form${cnt.index }" style="hidden:none"></div>
				</td>
			</tr>
			
			
 			<c:forEach items="${ReviewReply}" var="reply" varStatus="cnt">
 			<c:if test="${COMMENT.comment_no  == reply.getComment_no()}">
 			
					<tr id="rep${cnt.index }">
						<td width="13%" align=center style='word-break: break-all;'
												rowspan="2">
						<b>${reply.getWriter()} </b>
						<input type="hidden" name="comment_no"
												value="${reply.getComment_no()} ">
											</td>
						
						<td align="left" width="75%"
												style="border-right: 0 none; border-color: white;">
						&nbsp;${reply.getDate()}</td>
						<td style="border=left:0 none; border-color: white;">
							<c:choose>
								<c:when test="${not empty loginUser }">

									<c:if test="${sessionScope.loginUser.user_id == reply.getWriter() }">
										<a href="javascript:showReplyUpdateForm(${COMMENT.comment_no}, ${cnt.index}, '${COMMENT.comment_name}', ${reply.getNo()})">수정</a>|<a href="ReviewReplyDelete?no=${reply.no }&writer=${sessionScope.loginUser.user_id }">삭제</a>

									</c:if>

									<c:if test="${sessionScope.loginUser.user_id != reply.getWriter() }">
										<p id="coc${cnt.index }"><a class="comreply${cnt.index }" href="javascript:showCommentReplyForm(${COMMENT.comment_no}, ${cnt.index }, '${reply.getWriter()}')">답변</a></p>

									</c:if>
								</c:when>
								<c:when test="${empty loginUser }">

								<a  href="javascript:login()">답변</a>

								</c:when>
							</c:choose>
						</td>
					</tr>

					<tr id="repcon${cnt.index }" align="left" >

						<td colspan="2" style='word-break: break-all;'>&nbsp;${reply.getUser_id()} >>> ${reply.getContent()}</td>
					</tr>
					<tr align="left" bgcolor="#f0f0f0">
						<td colspan="3" style='word-break: break-all;'>
							<div id="div_commentreply2Form${cnt.index }" style="hidden:none"></div>
						</td>
					</tr>
				</c:if>
			</c:forEach> 
		</c:forEach>
	</table>

	<table width=100% align=center border=1 cellpadding=3 cellspacing=1
							style="border-width: 1; border-color: rgb(204, 204, 204); border-style: dotted;">
		<tr>
			<td bgcolor=#f0f0f0>
				<table width=100% cellpadding=3 cellspacing=0>
					<form class="comment" method=post action='ReviewCommentInsert'>

						<tr>
							<td><input type="hidden" id="comment_name" name="comment_name"
													value="${sessionScope.loginUser.user_id }" readonly size=10
													style="font-family: verdana; font-size: 97%; color: #000000;">
								<input type="hidden" id="posts_no" name="posts_no"
													value="${BOARD.posts_no}">
								&nbsp;&nbsp;<input type="hidden" id="posts_pass" name=posts_pass
													value="${sessionScope.loginUser.password }" size=10
													style="font-family: verdana; font-size: 97%; color: #000000;">
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
							</td>
						</tr>
						<tr>
							<td valign=bottom>
							<textarea name="comment_comment" cols="50" rows=5
														style="overflow: hidden; width: 93%; height:110px; line-height: 150%; style="font-family:verdana;font-size:97%; color:#000000; background-color:#f0f0f0;"></textarea>
												</td>
							<td align="center"><input type=submit id="commentParentSubmit"
													name="commentParentSubmit" value="등 록 "
													style="width:50px; height:50px; font-family: verdana; font-size: 97%;">
							</td>
						</tr>
					</form>
				</table>
			</td>
		</tr>
	</table>
	<br><br><br><br><br>
						
		</dd>
			</dl>
			</div>			
		</div>
	</div>
	<jsp:include page="../main_bottom.jsp"></jsp:include>
</body>
</html>
